<template>
    <div class="workday-calculator">
        <div class="tool-header">
            <h1>工作日计算器</h1>
            <p>计算两个日期之间的工作日天数，支持排除周末与自定义节假日</p>
        </div>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>日期范围</span>
                            <el-button type="primary" size="small" @click="calculate">计算</el-button>
                        </div>
                    </template>

                    <div class="form-section">
                        <el-form label-width="120px" label-position="left">
                            <el-form-item label="开始日期">
                                <el-date-picker v-model="form.startDate" type="date" placeholder="选择开始日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                            </el-form-item>

                            <el-form-item label="结束日期">
                                <el-date-picker v-model="form.endDate" type="date" placeholder="选择结束日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                            </el-form-item>

                            <el-form-item label="包含周末">
                                <el-switch v-model="form.includeWeekend" />
                            </el-form-item>

                            <el-form-item label="节假日">
                                <div class="holiday-input">
                                    <el-date-picker v-model="holidayInput" type="date" placeholder="选择节假日"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="addHoliday" />
                                    <small>所选日期会从工作日中排除</small>
                                </div>
                                <div class="holiday-tags" v-if="form.holidays.length">
                                    <el-tag v-for="holiday in form.holidays" :key="holiday" closable
                                        @close="removeHoliday(holiday)">
                                        {{ holiday }}
                                    </el-tag>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>计算结果</span>
                            <el-button text size="small" @click="reset">重置</el-button>
                        </div>
                    </template>

                    <div class="result-section" v-if="result.calculated">
                        <div class="result-number">
                            <span class="value">{{ result.workdays }}</span>
                            <span class="label">个工作日</span>
                        </div>

                        <el-descriptions :column="1" border>
                            <el-descriptions-item label="总天数">
                                {{ result.totalDays }} 天
                            </el-descriptions-item>
                            <el-descriptions-item label="周末天数" v-if="!form.includeWeekend">
                                {{ result.weekendDays }} 天
                            </el-descriptions-item>
                            <el-descriptions-item label="节假日天数" v-if="form.holidays.length">
                                {{ result.holidayDays }} 天
                            </el-descriptions-item>
                            <el-descriptions-item label="开始日期">
                                {{ form.startDate || '未选择' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="结束日期">
                                {{ form.endDate || '未选择' }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <el-empty v-else description="请选择日期并点击计算" />
                </el-card>
            </el-col>
        </el-row>

        <el-card class="info-card">
            <template #header>
                <div class="card-header">
                    <span>使用说明</span>
                </div>
            </template>
            <ul class="info-list">
                <li>工作日默认排除周六、周日；可通过“包含周末”开关调整。</li>
                <li>节假日支持自定义日期，添加后会自动从工作日中扣除。</li>
                <li>计算结果包含起始日期，例如周一至周三共计 3 天。</li>
            </ul>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const form = reactive({
    startDate: '',
    endDate: '',
    includeWeekend: false,
    holidays: []
})

const holidayInput = ref('')

const result = reactive({
    calculated: false,
    totalDays: 0,
    weekendDays: 0,
    holidayDays: 0,
    workdays: 0
})

const addHoliday = (date) => {
    if (!date) return
    if (!form.holidays.includes(date)) {
        form.holidays.push(date)
    }
    holidayInput.value = ''
}

const removeHoliday = (date) => {
    form.holidays = form.holidays.filter(item => item !== date)
}

const reset = () => {
    form.startDate = ''
    form.endDate = ''
    form.includeWeekend = false
    form.holidays = []
    result.calculated = false
}

const calculate = () => {
    if (!form.startDate || !form.endDate) {
        ElMessage.warning('请选择开始和结束日期')
        return
    }

    const start = dayjs(form.startDate)
    const end = dayjs(form.endDate)

    if (end.isBefore(start)) {
        ElMessage.error('结束日期不能早于开始日期')
        return
    }

    let totalDays = end.diff(start, 'day') + 1
    let weekendDays = 0
    let holidayDays = 0
    let workdays = 0

    for (let date = start; !date.isAfter(end); date = date.add(1, 'day')) {
        const formatted = date.format('YYYY-MM-DD')
        const isWeekend = [0, 6].includes(date.day())
        const isHoliday = form.holidays.includes(formatted)

        if (!form.includeWeekend && isWeekend) {
            weekendDays++
            continue
        }

        if (isHoliday) {
            holidayDays++
            continue
        }

        workdays++
    }

    if (form.includeWeekend) {
        weekendDays = 0
    }

    Object.assign(result, {
        calculated: true,
        totalDays,
        weekendDays,
        holidayDays,
        workdays
    })
}
</script>

<style scoped>
.workday-calculator {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.tool-header {
    text-align: center;
    margin-bottom: 30px;
}

.tool-header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.form-section {
    padding: 10px 0;
}

.holiday-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.holiday-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.result-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-number {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.result-number .value {
    font-size: 3rem;
    font-weight: 700;
    color: #409eff;
}

.result-number .label {
    font-size: 1.2rem;
    color: #666;
}

.info-card {
    margin-top: 30px;
}

.info-list {
    margin: 0;
    padding-left: 20px;
    color: #666;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .result-number {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>
